<!--suppress ALL -->
<template>
  <view v-show="isLogin">
    <uni-forms ref="loginForm" :modelValue="loginForm" :rules="loginRules" label-position="left">
      <uni-forms-item label="用户名" name="username">
        <uni-easyinput v-model="loginForm.username" placeholder="请输入用户名" type="text"/>
      </uni-forms-item>
      <uni-forms-item label="密码" name="password">
        <uni-easyinput v-model="loginForm.password" placeholder="请输入密码" type="password"/>
      </uni-forms-item>
      <uni-forms-item label="验证码" name="code" required>
        <uni-easyinput v-model="loginForm.code" placeholder="请输入验证码" type="number"/>
        <image :src="code_src"
               class="cap"
               @click="refreshCode">
        </image>
      </uni-forms-item>
    </uni-forms>
    <u-button :ripple="true" shape="square" type="success" @click="login">登录</u-button>
    <u-button :ripple="true" shape="square" type="warning" @click="isLogin=!isLogin;this.getCode()">未注册？注册
    </u-button>
  </view>
  <view v-show="!isLogin">
    <uni-forms ref="registerForm" :modelValue="registerForm" :rules="registerRules" label-position="left">
      <uni-forms-item label="用户名" name="username">
        <uni-easyinput v-model="registerForm.username" placeholder="请输入用户名" type="text"/>
      </uni-forms-item>
      <uni-forms-item label="密码" name="password">
        <uni-easyinput v-model="registerForm.password" placeholder="请输入密码" type="password"/>
      </uni-forms-item>
      <uni-forms-item label="重复密码" name="confirmPassword">
        <uni-easyinput v-model="registerForm.confirmPassword" placeholder="请再次输入密码" type="password"/>
      </uni-forms-item>
      <uni-forms-item label="手机号码" name="phonenumber">
        <uni-easyinput v-model="registerForm.phonenumber" placeholder="请输入手机号码" type="number"/>
      </uni-forms-item>
      <uni-forms-item label="验证码" name="code" required>
        <uni-easyinput v-model="registerForm.code" placeholder="请输入验证码" type="number"/>
        <image :src="code_src"
               class="cap"
               @click="refreshCode">
        </image>
      </uni-forms-item>
    </uni-forms>
    <u-button :ripple="true" shape="square" type="success" @click="login">注册</u-button>
    <u-button :ripple="true" shape="square" type="warning" @click="isLogin=!isLogin;this.getCode()">已经注册？登录
    </u-button>
  </view>
</template>

<script>
import {captchaImage, login, register} from "@/api/login.js"
import UButton from "../../uni_modules/vk-uview-ui/components/u-button/u-button";

export default {
  components: {UButton},
  data() {
    return {
      isLogin: true,
      uuid: "",
      code_src: "",
      loginForm: {
        username: "",
        password: "",
        code: "",
      },
      loginRules: {
        username: {
          rules: [{
            required: true,
            errorMessage: '请输入用户名',
          },]
        },
        password: {
          rules: [{
            require: true,
            errorMessage: '请输入密码',
          }]
        },
        code: {
          rules: [{
            require: true,
            errorMessage: '请输入验证码',
          }]
        },
      },
      registerRules: {
        username: {
          rules: [{
            required: true,
            errorMessage: '请输入用户名',
          },]
        },
        password: {
          rules: [{
            require: true,
            errorMessage: '请输入密码',
          }]
        },
        code: {
          rules: [{
            require: true,
            errorMessage: '请输入验证码',
          }]
        },
        phonenumber: {
          rules: [{
            require: true,
            errorMessage: '请输入手机号码',
          }, {
            minLength: 11,
            maxLength: 11,
            errorMessage: '手机号的长度为11位',
          }]
        },
        confirmPassword: {
          rules: [{
            require: true,
            errorMessage: '请再次输入密码',
          }, {
            validateFunction: function (rule, value, data, callback) {
              if (value !== data.password) {
                callback('两次输入密码不一致！')
              } else {
                callback();
              }
            }
          }]
        }
      },
      registerForm: {
        username: "",
        phonenumber: "",
        password: "",
        confirmPassword: "",
        code: "",
        bindId: ""
      }
    }
  },
  methods: {
    getCode() {
      captchaImage().then((res) => {
        this.uuid = res.uuid
        this.code_src = "data:image/png;base64," + res.img
      })
    },
    login() {
      this.$refs.loginForm.validate().then(res => {
        let data = this.loginForm
        this.loginForm["uuid"] = this.uuid
        login(data).then(res => {
          if (res.code === 200) {
            uni.showToast({
              title: "登陆成功",
              duration: 2000,
              icon: "success"
            })
            uni.setStorageSync("token", res.token)
            uni.switchTab({
              url: "/pages/index/index"
            })
          } else {
            uni.showToast({
              title: res.msg,
              duration: 2000,
              icon: "error"
            })
            this.getCode()
          }
        })
      }).catch(err => {
        console.log(err)
        this.getCode();
      })
    },
    refreshCode() {
      this.getCode()
    },
    register() {
      this.$refs.registerForm.validate().then(res => {
        let data = this.registerForm
        data["uuid"] = this.uuid
        register().then(res => {
          uni.showToast({
            title: res.msg,
            duration: 2000,
          });
          uni.setStorageSync("token", res.token);
          this.isLogin = !this.isLogin
          this.getCode();
        })
      }).catch(err => {
        console.log(err)
        this.getCode();
      })
    }
  },
  created() {
    this.getCode()
  },
  onReady() {
    this.$refs.registerForm.setRules(this.registerRules)
  },
  onLoad(param) {
    param.expired || uni.getStorage({
      key: 'token',
      success: function (res) {
        if (res.data != null && res.data != "") {
          uni.switchTab({
            url: "/pages/index/index"
          })
        }
      }
    })
  }
}
</script>

<style>
.cap {
  width: 160px;
  height: 50px;
  display: inline-block;
  box-sizing: border-box;
  margin: 4px;
}
</style>
